import conversion_send_icon from '@/assets/image/conversion_send.png';
import {
  DeleteOutlined,
  FileAddOutlined,
  FileOutlined,
  FilePdfOutlined,
  FileTextOutlined,
  FileWordOutlined,
  LeftOutlined,
} from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, message, Upload } from 'antd';
import { nanoid } from 'nanoid';
import React, { useState } from 'react';
import './../index.less';
const { Dragger } = Upload;

const UploadFile: React.FC<any> = (props: any) => {
  const [fileList, setFileList] = useState<any>([]);
  const uploadProps: UploadProps = {
    name: 'file',
    accept: '.docx, .pdf, .doc, .txt',
    action: '',
    headers: {},
    multiple: true,
    maxCount: 1,
    disabled: fileList.length > 0,
    showUploadList: false,
    beforeUpload: () => {
      return false;
    },
    onChange: async (filer: any) => {
      if (filer.file?.status !== 'uploading') {
        const file = filer.file;
        console.log(file);

        const fileInfo = file.name.split('.');
        file.title = fileInfo[0];
        file.accept = fileInfo[1];
        const files = filer.fileList.map((file: any) => {
          if (file.uid === filer.file.uid) {
            file.originFileObj = filer.file;
          }

          return file;
        });
        setFileList(files);
      }

      // if (filer.file?.status === 'done') {
      //   message.success(`${filer.file.name} 文件上传成功`);
      // } else if (filer.file?.status === 'error') {
      //   message.error(`${filer.file.name} 文件上传失败。`);
      // }
    },
  };
  //删除文件
  const handleDelFile = (e: any, index: number) => {
    e.stopPropagation();
    const fileListCopy = [...fileList];
    fileListCopy.splice(index, 1);
    setFileList(fileListCopy);
  };
  //提交文件
  const submitFile = () => {
    console.log(fileList);
    if (fileList.length === 0) {
      message.open({
        type: 'warning',
        content: '请先上传文件',
      });
      return;
    }
    const file = fileList[0];
    // console.log('选择的文件：', file);
    props.uploadSuccess(file);
  };

  //返回输入模式
  const returnInput = () => {
    props.setShowUpload(false);
    props.handleReturn();
  };

  return (
    <div className="highClassUploadFileWrap">
      <div className="uploadFileReturn" onClick={returnInput}>
        <Button shape="circle" icon={<LeftOutlined />} />
      </div>
      <div className="draggerFileWrap">
        <Dragger {...uploadProps} style={{ border: 'none' }}>
          {fileList?.length === 0 ? (
            <>
              <p className="ant-upload-drag-icon">
                <FileAddOutlined />
              </p>
              <p className="ant-upload-hint">点击选择文档，或直接拖拽文档到此</p>
            </>
          ) : (
            <div className="fileListBox" style={{ height: '126px', padding: '0 15px' }}>
              {fileList.map((item: any, index: number) => (
                <div className="fileList" key={nanoid()}>
                  <span className="fileList-hd">
                    {item?.originFileObj ? (
                      item?.originFileObj.accept === 'docx' ||
                      item?.originFileObj.accept === 'doc' ? (
                        <FileWordOutlined />
                      ) : item?.originFileObj.accept === 'txt' ? (
                        <FileTextOutlined />
                      ) : item?.originFileObj.accept === 'pdf' ? (
                        <FilePdfOutlined />
                      ) : (
                        <FileOutlined />
                      )
                    ) : null}
                  </span>
                  <span className="fileList-bd">{item?.name.substring(0, 15)}</span>
                  <span
                    className="fileList-ft"
                    onClick={(e) => {
                      handleDelFile(e, index);
                    }}
                  >
                    <DeleteOutlined />
                  </span>
                </div>
              ))}
            </div>
          )}
        </Dragger>
      </div>
      <div className="uploadFileSubmit" onClick={submitFile}>
        <img src={conversion_send_icon} width={30} height={30} />
      </div>
    </div>
  );
};

export default UploadFile;
